<template>
  <div class="bootstrap-jumbotron" ref="jumbotron">
    <electron-canvas>
      <electron-logo/>
    </electron-canvas>
    <!-- <ul class="bootstrap-feed">
      <li v-for="feed in feeds" :key="feed.title + feed.msg">
        {{'['+ feed.title + '] ' + feed.msg}}
        <i style="float:right">{{feed.status}}</i>
      </li>
    </ul> -->
  </div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator'
import ElectronCanvas from './Bootstrap/ElectronCanvas.vue'
import ElectronLogo from './Bootstrap/ElectronLogo.vue'
import { ipcRenderer } from 'electron'

import { Bootstrap, Feedback, Feed } from './Bootstrap/bootstrap'
import TestModule from './Bootstrap/test'

const PULL_TIME = 100

@Component({
  name: 'bootstrap',
  components: { ElectronLogo, ElectronCanvas }
})
export default class BootstrapView extends Vue {
  feeds: Feed[]
  feedQueue: Feed[]
  done: boolean

  constructor () {
    super()
    this.feeds = []
    this.feedQueue = []
    this.done = false
  }
  mounted () {
    setTimeout(this.pulling, PULL_TIME)
    setTimeout(this.loading, 3000)
  }

  /**
   * 开始加载模块，启动项目.
   */
  async loading () {
    // (this.$refs[ 'jumbotron' ] as Element).classList.add('loading')
    await new Bootstrap(this.processFeedback)
      .then(new TestModule('title1'))
      .then(new TestModule('title2'))
      .then(new TestModule('title3'), new TestModule('title4'), new TestModule('title5'))
      .bootstrap()
    this.done = true
  }

  processFeedback (feed: Feed) {
    this.feedQueue.push(feed)
  }

  pulling () {
    let feed = this.feedQueue.shift()
    if (feed) {
      this.feeds.push(feed)
      if (this.feeds.length > 2) {
        this.feeds.shift()
      }
    }
    if (feed || !this.done) {
      setTimeout(this.pulling, PULL_TIME)
    } else {
      setTimeout(this.finished, PULL_TIME)
    }
  }

  finished () {
    ipcRenderer.sendSync('bootstrap-stage', 'finished')
    this.$router.push('/main')
  }
}
</script>
<style lang="scss">
.bootstrap-jumbotron {
  color: #fff;
  background-color: #2b2e3b;
  /* position: relative; */
  height: 100%;
  width: 100%;
}

.bootstrap-jumbotron {
  padding-top: 15%;
  transition: padding-top 0.5s;
}

.bootstrap-jumbotron.loading {
  padding-top: 5%;
}

.bootstrap-feed {
  width: 300px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 0.9em;
}
</style>
